import React, { useState } from 'react'
import { ResultPage, Card, Button, Tabs } from 'antd-mobile'
import { Exchange } from '@react-vant/icons';
import styles from './index.module.css'
import { useSelector, useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom';
import { cityhh, daydate } from '../../store/cityles';
import { CalendarPicker, List } from 'antd-mobile'
import dayjs from 'dayjs';
function Home() {
  let navgetion = useNavigate()
  const [visible1, setVisible1] = useState(false)
  const { start, end, date } = useSelector((state) => state.cityles)
  const dispatch = useDispatch()

  return (
    <div>


      <ResultPage
        status=''
        // title=''
        description=''
      >

        <Card style={{ height: 228, marginTop: 12 }}>
        {/* tab切换 */}
          <Tabs>
            <Tabs.Tab title='国内火车' key='fruits'>

              <div className={styles.cdlist}>
                <span onClick={() => navgetion('/city/start')}>{start}</span>
{/* 	出发城市和抵达城市可以交换交换城市 */}
                <span><Exchange onClick={() => dispatch(cityhh())} /></span>

                <span onClick={() => navgetion('/city/end')}>{end}</span>
              </div>
              <div>
                <span onClick={() => setVisible1(true)}>{date}</span>
              </div>
              <div >
                <Button block color='primary' size='large' className={styles.bulist}>
                  查询
                </Button>
              </div>
              <div>
                <span>北京-厦门10-22</span>清除历史
              </div>
            </Tabs.Tab>
            <Tabs.Tab title='机票' key='vegetables'>
              机票
            </Tabs.Tab>
            <Tabs.Tab title='汽车票' key='animals'>
              汽车票
            </Tabs.Tab>
          </Tabs>
{/* 当选择日期的时候， 弹出日期选择器 */}
          <CalendarPicker
            visible={visible1}
            selectionMode='single'
            onChange={(val)=>{
               dispatch(daydate({date: dayjs(val).format('YYYY-MM-DD')}))
              setVisible1(false)
            }}
            onClose={() => setVisible1(false)}
            onMaskClick={() => setVisible1(false)}
          />
        </Card>


      </ResultPage>

    </div>
  )
}

export default Home
